<script setup>
  import { ref } from 'vue'
  import { convertFileSize, timeFormat } from '@/utils/util'
  import { updateFile } from '@/api/file'

  const popup = ref(null)
  const fileInfo = ref(null)
  const nameEdit = ref(false)
  const timeEdit = ref(false)
  const open = data => {
    popup.value.open()
    fileInfo.value = data
  }
  const close = () => {
    popup.value.close()
  }
  const handleNameEdit = () => {
    nameEdit.value = false
    updateFile(fileInfo.value).then(() => {
      ElMessage.success('修改成功')
    })
  }
  const handleTimeEdit = () => {
    timeEdit.value = false
    fileInfo.value.updateTime = timeFormat(fileInfo.value.updateTime)
    updateFile(fileInfo.value).then(() => {
      ElMessage.success('修改成功')
    })
  }
  defineExpose({ open })
</script>

<template>
  <Popup ref="popup">
    <div class="info">
      <div class="header">
        <h2>详情信息</h2>
        <svg class="icon" aria-hidden="true" @click="close">
          <use xlink:href="#icon-quxiao"></use>
        </svg>
      </div>
      <div class="item" @dblclick="nameEdit = !nameEdit">
        <div class="line-1">名称</div>
        <div class="line-2" v-if="!nameEdit">
          {{ fileInfo.name }}
        </div>
        <div class="line-edit" v-else>
          <el-input
            style="width: 80%"
            v-model="fileInfo.name"
            class="input"
            @keyup.enter="handleNameEdit"
            placeholder="请输入名称"
          />
          <svg class="icon" aria-hidden="true" @click="nameEdit = !nameEdit">
            <use xlink:href="#icon-quxiao"></use>
          </svg>
          <svg class="icon" aria-hidden="true" @click="handleNameEdit">
            <use xlink:href="#icon-queren"></use>
          </svg>
        </div>
      </div>
      <div class="item" @dblclick="timeEdit = !timeEdit">
        <div class="line-1">时间</div>
        <div class="line-2" v-if="!timeEdit">{{ fileInfo.updateTime }}</div>
        <div class="line-edit" v-else>
          <el-date-picker
            v-model="fileInfo.updateTime"
            type="datetime"
            style="width: 100%"
            placeholder="选择时间"
            @change="handleTimeEdit"
            value-format="x"
          />
        </div>
      </div>
      <div class="item">
        <div class="line-1">尺寸</div>
        <div class="line-2">
          {{ fileInfo.width }} x {{ fileInfo.height }} 像素
        </div>
      </div>
      <div class="item">
        <div class="line-1">大小</div>
        <div class="line-2">{{ convertFileSize(fileInfo.size) }}</div>
      </div>
      <div class="item">
        <div class="line-1">路径</div>
        <div class="line-2">{{ fileInfo.path }}</div>
      </div>
    </div>
  </Popup>
</template>

<style scoped lang="scss">
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-primary-label);
  }
  .item {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    .line-1 {
      font-size: 16px;
      color: var(--color-secondary-label);
      margin-bottom: 5px;
    }
    .line-2 {
      color: var(--color-primary-label);
      font-size: 20px;
    }
    .line-edit {
      display: flex;
      align-items: center;
      .input {
        margin-right: 10px;
      }
      .icon {
        cursor: pointer;
        margin-right: 10px;
      }
    }
  }
  .info {
    min-width: 400px;
    height: 450px;
    background: var(--color-background);
    border-radius: 30px;
    box-shadow: 0 0 10px var(--box-shadow-color);
    padding: 20px;
  }
</style>
